<template>
  <div id="margin-box">
    <div id="centeredDiv">
      <div v-if="isCreated">
        <div class="container">
          <span class="room-name">玩家
            <span style="color: red;">{{playerList[0].id}}</span>
          的房间</span>

          <span class="room-info">
    <span class="brackets">房间名称:({{roomName}})</span>
  </span>
        </div>
<!--        <div>-->
<!--          <span style="display: inline-block; min-width: 100px;text-align: left">{{playerList[0].id}}的房间</span>-->
<!--          <span>-->
<!--            ({{roomName}})-->
<!--          </span>-->
<!--        </div>-->
        <div>
          <span style=" min-width: 100px; font-size: 14px;">
  房间号:
</span>
          <input :value="roomId" disabled style="padding: 4px 8px; border: 1px solid #ccc; border-radius: 3px; width: 270px; font-size: 14px;margin-right: 38px;"></input>
        </div>
<!--        <div>-->
<!--          <span style="display: inline-block; min-width: 100px;">房主:</span>-->
<!--          <span>{{ created }}</span>-->
<!--        </div>-->
        <div>

  <span v-for="(item, index) in playerList" :key="index" style="display: inline-block; font-size: 14px;margin: 38px 20px;">
    <span>{{ item.id }}</span>

    <div style="vertical-align: middle;">
      <img src="@/assets/one.jpg" alt="用户头像" class="round-imageroom">
    </div>

    <div>
      <span v-if="item.ready" style="color: green; font-size: 12px;">已准备</span>
      <span v-else style="color: red; font-size: 12px;">未准备</span>
    </div>
  </span>
        </div>
        <div>
          <el-button type="danger" @click="exitRoom" style="padding: 8px 12px; margin-right: 20px;">退出房间</el-button>
          <el-button type="primary" @click="requireStartGame" style="padding: 8px 12px;">{{ readyButton }}</el-button>
        </div>
      </div>

      <div v-if="!isCreated">
        <div>
          <span style="display: inline-block; min-width: 100px;">房间名称:</span>
          <input type="text" v-model="roomName" style="padding: 4px; border: 1px solid #ccc; border-radius: 3px;">
        </div>
        <el-button type="primary" @click="createRoom" style="padding: 8px 12px;">创建房间</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LandlordCreateRoom",
  props: {
    user: {},
    ws: {}
  },
  data() {
    return {
      roomName: '',
      roomId: '',
      created: null,
      playerList: [],
      isCreated: false,
      ready: false,
      exitFlag: false,
    }
  },
  computed: {
    readyButton: function () {
      return this.user.uname === this.created ? "开始游戏" : this.ready ? "已准备" : "准备";
    },
  },
  methods: {
    exitRoom(){
      const m = {
        order: 3,
        roomId: this.roomId,
        game: 1,
        mode: 0,
        operation: 1
      }
      this.exitFlag = true;
      this.ws.send(JSON.stringify(m));

    },
    createRoom() {
      const m = {
        order: 2,
        roomName: this.roomName
      }
      if(this.roomName!='' && this.roomName!=null)
        this.ws.send(JSON.stringify(m))
      else {
        this.$notify.error("请输入房间名称")
      }
    },
    handle(res) {
      console.log("res", res);
      switch (res.order) {
        case 0:
          this.isCreated = true;
          this.roomId = res.roomId;
          this.roomName = res.roomName;
          break;
        case 1:
          this.created = res.created;
          this.playerList = res.players;
          break;
        case 2:
          if (!res.result) {
            alert("开始失败,人数不够或者玩家未全部准备");
            break;
          }
          if(this.exitFlag){
            //刷新界面
            this.isCreated = false;
            this.roomName = '';
          }else if (this.created != this.user.uname) {
            this.ready = true;
            break;
          }
          // this.isStart();
          break;
        case 5:
          if(res.gameType == 0){
            this.created = false;
          }
          this.isCreated = res.gameType;
          this.roomId = res.roomId;
          this.roomName = res.roomName;
          this.created = res.created;
          this.playerList = res.players;
          break;
        case 6:
          if (res.result) {
            this.startGame(res.game);
          }
          break;
      }
    },
    requireRoom() {
      //请求查询自己加入或创建的房间信息
      const p = {
        order: 5
      }
      this.ws.send(JSON.stringify(p));
    },
    requireStartGame() {
      let roomId = this.roomId;
      const p = {
        order: 3,
        game: 1,
        mode: 1,
        roomId: roomId
      }
      this.ws.send(JSON.stringify(p));
    },
    startGame() {
      //启动游戏界面
      this.$emit("startGame", {roomId:this.roomId,roomName:this.roomName});
    },
    //请求当前是否在游戏状态，如果是则自动跳转到游戏界面
    isStart() {
      const p = {
        order: 6,
        game: 1
      }
      this.ws.send(JSON.stringify(p));
    }
  },
  beforeMount() {
    let handle = (m) => this.handle(m);
    this.ws.onmessage = function (m) {
      handle(JSON.parse(m.data));
    }
    this.isStart();
    this.requireRoom();
  }
}
</script>

<style scoped>
div{
  display: block;
  text-align: center;
}
#margin-box{

}
#centeredDiv {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-width: 400px;
}

.round-imageroom{
  border-radius: 50%;
  height: 40px;
  width: 45px;
}

.container {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.room-name {
  display: inline-block;
  min-width: 100px;
  text-align: left;
  font-weight: bold;
  margin-right: 10px;
}

.room-info {
  display: inline-block;
}

.brackets {
  font-size: 12px;
  color: grey;
  position: relative;
}

.last-letter {
  position: absolute;
  right: 0;
  bottom: -8px;
  font-size: 16px;
}
</style>
